<template>
  <div>
    <el-button type="primary" @click="rowAdd">Add {{table_type}}</el-button>
    <el-button type="danger" @click="rowDel">Del {{table_type}}</el-button>

    <el-table
      ref="tableSelect"
      :data="table_data"
      border
      style="width: 100%; margin-top: 18px"
      row-key="id"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" min-width="5%" label="Option"/>
      <el-table-column
        v-for="(item, index) in table_column"
        :label="item.label"
        :min-width="item.minWidth"
        :key="'col' + index">
        <template v-slot="scope">
          <div v-if="item.type === 'select_type'">
            <el-select v-model="scope.row[item['valueKey']]" placeholder="请选择" @change="rowContentChange">
              <el-option
                v-for="items in type_options"
                :key="items.label"
                :label="items.label"
                :value="items.value">
              </el-option>
            </el-select>
          </div>
          <div v-else-if="item.type === 'select_comparator'">
            <el-select v-model="scope.row[item['valueKey']]" placeholder="请选择" @change="rowContentChange">
              <el-option
                v-for="items in comparator_options"
                :key="items.label"
                :label="items.label"
                :value="items.value">
              </el-option>
            </el-select>
          </div>
          <div v-else-if="item.type === 'select_hooks'">
            <el-select v-model="scope.row[item['valueKey']]" placeholder="请选择">
              <el-option
                v-for="items in hooks_options"
                :key="items.label"
                :label="items.label"
                :value="items.value">
              </el-option>
            </el-select>
          </div>
          <div v-else-if="item.type === 'textarea' && item.label === 'Key'"  >
            <el-input v-model="scope.row[item['valueKey']]" type="textarea" :rows="2"
                      placeholder='单个:key, 多个:key1-key2'
                      @change="rowContentChange"></el-input>
          </div>
          <div v-else-if="item.type === 'textarea' && item.label === 'Value'"  >
            <el-input v-model="scope.row[item['valueKey']]" type="textarea" :rows="2"
                      placeholder='单个:["value1", "value2],  多个:[["name1", "pwd1"],["name2","pwd2"]]'
                      @change="rowContentChange"></el-input>
          </div>
          <div v-else>
            <el-input v-model="scope.row[item['valueKey']]" @change="rowContentChange"></el-input>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import Sortable from '_sortablejs@1.15.0@sortablejs'

export default {
  name: 'TableSelect',
  props: {
    // eslint-disable-next-line vue/prop-name-casing
    tableType: {
      type: String,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: ''
    },
    datasText: {
      type: Array,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      index: 0,
      table_type: this.tableType,
      table_column: [],
      table_data: this.datasText,
      type_options: [ // key类型选项
        {
          value: 'string',
          label: 'string'
        },
        {
          value: 'int',
          label: 'int'
        },
        {
          value: 'float',
          label: 'float'
        },
        {
          value: 'boolean',
          label: 'boolean'
        },
        {
          value: 'file',
          label: 'file'
        }],
      comparator_options: [ // comparator类型选项
        {
          value: 'equals',
          label: 'equals'
        },
        {
          value: 'contains',
          label: 'contains'
        },
        {
          value: 'startwith',
          label: 'startwith'
        },
        {
          value: 'endwith',
          label: 'endwith'
        },
        {
          value: 'regex_match',
          label: 'regex_match'
        },
        {
          value: 'type_match',
          label: 'type_match'
        },
        {
          value: 'contained_by',
          label: 'contained_by'
        },
        {
          value: 'less_than',
          label: 'less_than'
        },
        {
          value: 'less_than_or_equals',
          label: 'less_than_or_equals'
        },
        {
          value: 'greater_than',
          label: 'greater_than'
        },
        {
          value: 'greater_than_or_equals',
          label: 'greater_than_or_equals'
        },
        {
          value: 'not_equals',
          label: 'not_equals'
        },
        {
          value: 'string_equals',
          label: 'string_equals'
        },
        {
          value: 'length_equals',
          label: 'length_equals'
        },
        {
          value: 'length_greater_than',
          label: 'length_greater_than'
        },
        {
          value: 'length_greater_than_or_equals',
          label: 'length_greater_than_or_equals'
        },
        {
          value: 'length_less_than',
          label: 'length_less_than'
        },
        {
          value: 'length_less_than_or_equals',
          label: 'length_less_than_or_equals'
        }
      ],
      hooks_options: [ // hooks类型选项
        {
          value: 'execute_sql',
          label: '执行sql语句ConfigDataBase'
        },
        {
          value: 'executeSql',
          label: '执行sql语句_MySQL'
        },
        {
          value: 'execute_bat',
          label: '执行bat脚本'
        },
        {
          value: 'execute_es',
          label: '执行es语句'
        }],
      // cloumn type
      pre_case_column: [
        {
          label: '用例ID',
          prop: 'index',
          minWidth: '15%',
          valueKey: 'index'
        },
        {
          label: '用例名称',
          prop: 'name',
          minWidth: '70%',
          valueKey: 'name'
        }
      ],
      pre_case_data: {
        project: '',
        module: '',
        case: '',
        project_list: [{ 'index': '1', 'name': '项目1' }, { 'index': '2', 'name': '项目2' }],
        module_list: [{ 'index': '1', 'name': '模块1' }, { 'index': '2', 'name': '模块2' }],
        case_list: [{ 'index': '1', 'name': 'test_测试所属用例1' }, { 'index': '2', 'name': 'test_测试所属用例2_名称字段' }]
      },
      // cloumn type
      data_column: [
        {
          label: 'Key',
          prop: '关键字',
          minWidth: '40%',
          type: 'input',
          valueKey: 'inputKey'
        },
        {
          label: '类型',
          prop: 'Type',
          minWidth: '10%',
          type: 'select_type',
          valueKey: 'selectType'
        },
        {
          label: 'Value',
          prop: '值',
          minWidth: '45%',
          type: 'input',
          valueKey: 'inputValue'
        }
      ],
      params_column: [
        {
          label: 'Key',
          prop: '关键字',
          minWidth: '40%',
          type: 'input',
          valueKey: 'inputKey'
        },
        {
          label: '类型',
          prop: 'Type',
          minWidth: '10%',
          type: 'select_type',
          valueKey: 'selectType'
        },
        {
          label: 'Value',
          prop: '值',
          minWidth: '45%',
          type: 'input',
          valueKey: 'inputValue'
        }
      ],
      headers_column: [
        {
          label: 'Key',
          prop: '关键字',
          minWidth: '45%',
          type: 'input',
          valueKey: 'inputKey'
        },
        {
          label: 'Value',
          prop: '值',
          minWidth: '45%',
          type: 'input',
          valueKey: 'inputValue'
        }
      ],
      extract_column: [
        {
          label: 'Key',
          prop: '关键字',
          minWidth: '50%',
          type: 'input',
          valueKey: 'inputKey'
        },
        {
          label: 'Value',
          prop: '值',
          minWidth: '45%',
          type: 'input',
          valueKey: 'inputValue'
        }
      ],
      validate_column: [
        {
          label: '检查项',
          prop: 'Check',
          minWidth: '35%',
          type: 'input',
          valueKey: 'inputCheck'
        },
        {
          label: '比较器',
          prop: 'Comparator',
          minWidth: '15%',
          type: 'select_comparator',
          valueKey: 'selectComparator'
        },
        {
          label: '类型',
          prop: 'Type',
          minWidth: '10%',
          type: 'select_type',
          valueKey: 'selectType'
        },
        {
          label: '预期',
          prop: 'Expected',
          minWidth: '35%',
          type: 'input',
          valueKey: 'inputExpected'
        }
      ],
      variable_column: [
        {
          label: 'Key',
          prop: '关键字',
          minWidth: '40%',
          type: 'input',
          valueKey: 'inputKey'
        },
        {
          label: '类型',
          prop: 'Type',
          minWidth: '10%',
          type: 'select_type',
          valueKey: 'selectType'
        },
        {
          label: 'Value',
          prop: '值',
          minWidth: '45%',
          type: 'input',
          valueKey: 'inputValue'
        }
      ],
      parameters_column: [
        {
          label: 'Key',
          prop: '关键字',
          minWidth: '50%',
          type: 'textarea',
          valueKey: 'inputKey'
        },
        {
          label: 'Value',
          prop: '值',
          minWidth: '45%',
          type: 'textarea',
          valueKey: 'inputValue'
        }
      ],
      setup_hooks_column: [
        {
          label: 'setup_hooks',
          prop: 'setup_hooks',
          minWidth: '20%',
          type: 'select_hooks',
          valueKey: 'selectHooks'
        },
        {
          label: 'Value',
          prop: '值',
          minWidth: '75%',
          type: 'input',
          valueKey: 'inputValue'
        }
      ],
      teardown_hooks_column: [
        {
          label: 'teardown_hooks',
          prop: 'teardown_hooks',
          minWidth: '20%',
          type: 'select_hooks',
          valueKey: 'selectHooks'
        },
        {
          label: 'Value',
          prop: '值',
          minWidth: '75%',
          type: 'input',
          valueKey: 'inputValue'
        }
      ],
    }
  },
  mounted() {
    this.index = this.table_data.length
    console.log(this.table_type + " table length:" + this.index.toString())
    var that = this
    this.$nextTick(function() {
      that.rowDrag()
    })

    // request
    if (this.table_type == 'Data') {
       this.table_column = this.data_column
    }
    if (this.table_type == 'Params') {
       this.table_column = this.params_column
    }
    if (this.table_type == 'Headers') {
        this.table_column = this.headers_column
    }

    if (this.table_type == 'Extract') {
        this.table_column = this.extract_column
    }
    if (this.table_type == 'Validate') {
       this.table_column = this.validate_column
    }

    if (this.table_type == 'Variables') {
      this.table_column = this.variable_column
    }
    if (this.table_type == 'Parameters') {
        this.table_column = this.parameters_column
    }
    // hooks
    if (this.table_type == 'Setup Hooks') {
       this.table_column = this.setup_hooks_column
    }
    if (this.table_type == 'Teardown Hooks') {
      this.table_column = this.teardown_hooks_column
    }
  },
  methods: {
    rowAdd() {
      console.log(this.table_data)
      ++this.index
      if (this.table_type == 'Headers' || this.table_type == 'Parameters'|| this.table_type == 'Extract') {
        // headers data parameters  extract
        this.table_data.push({ id: String(this.index), inputKey: '', inputValue: '' })
      }
      if (this.table_type == 'Validate') {
        // validate
        this.table_data.push({ id: String(this.index), inputCheck: '', selectComparator: 'equals', selectType: 'string', inputExpected: '' })
      }
      if (this.table_type == 'Data' || this.table_type == 'Params' || this.table_type == 'Variables') {
        // variables
        this.table_data.push({ id: String(this.index), inputKey: '', selectType: 'string', inputValue: '' })
      }
      if (this.table_type == 'Setup Hooks' || this.table_type == 'Teardown Hooks') {
        // setup_hooks teardown_hooks
        this.table_data.push({ id: String(this.index), selectHooks: 'execute_sql', inputValue: ''})
      }

      var data = JSON.parse(JSON.stringify(this.table_data))
      // var item = data.splice(this.index, 0, this.index)
      this.$emit('changeList', { 'list': data })
    },
    rowContentChange() {
      var data = JSON.parse(JSON.stringify(this.table_data))
      // var item = data.splice(this.index, 0, this.index)
      this.$emit('changeList', { 'list': data })
    },
    handleSelectionChange(data) {
      console.log(data)
      var that = this
      var arr = []
      for (let i = 0; i < data.length; i++) {
        for (let j = 0; j < that.table_data.length; j++) {
          if (data[i].id === that.table_data[j].id) {
            arr.push(j)
          }
        }
      }
      this.multipleSelection = arr
    },
    rowDel() {
      var arr = []
      console.log(this.multipleSelection)
      for (var i = 0; i < this.table_data.length; i++) {
        if (this.multipleSelection.indexOf(i) < 0) {
          arr.push(this.table_data[i])
        }
      }
      this.table_data = arr

      var data = JSON.parse(JSON.stringify(this.table_data))
      // var item = data.splice(this.index, 0, this.index)
      this.$emit('changeList', { 'list': data })
    },
    rowDrag() {
      var tableSelect = this.$refs.tableSelect.$el
      const tbody = tableSelect.querySelector('.el-table__body-wrapper tbody')
      const _this = this
      Sortable.create(tbody, {
        animation: 150, // 拖拽延时
        onEnd({ oldIndex, newIndex }) {
          console.log('拖动了行', '拖动前序号: '+ oldIndex, '拖动后序号: ' + newIndex)
          var data = _this.table_data
          const currRow = data.splice(oldIndex, 1)[0]
          data.splice(newIndex, 0, currRow)

          // var item = data.splice(this.index, 0, this.index)
          _this.$emit('changeList', { 'list': data })
        }
      })

    }
  },
}
</script>

<style scoped>

</style>
